<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<nav>
    <div class="container">
        <a href="" class="qq"><img src="./img/logo.png" alt=""></a>
        <div class="sa">
            <ul>
                <li><a href="">HOME <span>&or;</span></a></li>
                <li><a href="">FEATURES <span>&or;</span></a></li>
                <li><a href="">PAGES <span>&or;</span></a></li>
                <li><a href="">PORTFOLIO <span>&or;</span></a></li>
                <li><a href="">BLOG <span>&or;</span></a></li>
            </ul>
            <div class="lv">
                <a href="">
                    <img src="./img/jian.png" alt="">
                    <span>UPGRADS TO PRO</span>
                </a>
            </div>
        </div>
    </div>
</nav>
<header>
    <div class="bd-example">
        <div id="carouselExampleCaptions" class="carousel slide lun" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="./img/banner.gif" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block" id="ww">
                        <h5>EASY TO CUSTMIZE</h5>
                        <p>Readaable code,well documented and FREE support</p>
                        <a href="">LEARN MORE</a>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./img/banner.gif" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block" id="ww">
                        <h5>Second slide label</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <a href="">LEARN MORE</a>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="./img/banner.gif" class="d-block w-100" alt="...">
                    <div class="carousel-caption d-none d-md-block" id="ww">
                        <h5>Third slide label</h5>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                        <a href="">LEARN MORE</a>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</header>
<main>
    <div class="col">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div>
                        <img src="./img/one.jpg" alt="">

                    </div>
                </div>
                <div class="col-md-3">
                    <div>
                        <img src="./img/two.jpg" alt="">
                        <span></span>
                    </div>
                </div>
                <div class="col-md-3">
                    <div>
                        <img src="./img/three.jpg" alt="">
                    </div>
                </div>
                <div class="col-md-3">
                    <div>
                        <img src="./img/fore.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="xia">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h4>KNOW BETTER</h4>
                    <span>……</span>
                    <h5>Synergistically procrastinate one-to-one results for
                        accurate platforms.Assertively whiteboard corporate
                        users whereas dynamic initiatives.</h5>
                    <p>Energistically architect leading-edge users and imexpensive internal or"organic"sources.
                        Distinctively evolove e-business resources after progressive intellectual capital.Objectively
                        architect maintainable technologies via strategiv convergence.Continually optimize
                        stand-alone expertise with e-business e-services.Continually conceptualize client0centered
                        opportunities and.</p>
                    <p>Dynarmically customize backward-compatible processes via front-end models.Distinctively
                        evisculate an expanded array of scenarios after virtual information.Professionally
                        predonminate techinically sound resources through impactful mindshare.Efficiently drive
                        viral interfaces without inexpensive value.Credibly.</p>
                </div>
                <div class="col-md-6">
                    <div>
                        <img src="./img/bei.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sik">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-2">
                            <img src="./img/a.gif" alt="">
                        </div>
                        <div class="col-10">
                            <h5>GOAL ORIENTED </h5>
                            <p>Holisticly harness just in time technologies via corporate scenarios.Intrinsicly
                                predonminate ubiquitous outsourcing through an expanded array of
                                functionalities.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-2">
                            <img src="./img/a.gif" alt="">
                        </div>
                        <div class="col-10">
                            <h5>GLOBAL SERVICE</h5>
                            <p>Holisticly harness just in time technologies via corporate scenarios.Intrinsicly
                                predonminate ubiquitous outsourcing through an expanded array of
                                functionalities.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-2">
                            <img src="./img/a.gif" alt="">
                        </div>
                        <div class="col-10">
                            <h5>DYNAMIC CHANGE </h5>
                            <p>Holisticly harness just in time technologies via corporate scenarios.Intrinsicly
                                predonminate ubiquitous outsourcing through an expanded array of
                                functionalities.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-2">
                            <img src="./img/a.gif" alt="">
                        </div>
                        <div class="col-10">
                            <h5>PROFESSIONAL SUPPORT </h5>
                            <p>Holisticly harness just in time technologies via corporate scenarios.Intrinsicly
                                predonminate ubiquitous outsourcing through an expanded array of
                                functionalities.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="dian">
        <div class="container">
            <img src="./img/tv.gif" alt="">
        </div>
    </div>
    <div class="zi">
        <div class="container con1">
            <h4>ULTRA RESPONSIVE</h4>
            <p>Phosfluorescently revolutionize viral leadership via turnkey techinology.Synergistivally monetize
                intermandated strategic theme areas through multimedia based.</p>
        </div>
        <div class="container">
            <ul>
                <li><a href="">Responsive</a></li>
                <li><a href="">Easy to Customize</a></li>
                <li><a href="">Design</a></li>
                <li><a href="">Free Updates & Support</a></li>
            </ul>
        </div>
    </div>
    <div class="niv">
        <div class="container">
            <div class="kuai4">
                <div class="h4">RECENT WORKS</div>
                <p>......</p>
                <a href="">See all works</a>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div>
                        <img src="./img/bg1.gif" alt="">
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <img src="./img/bg2.gif" alt="">
                    </div>
                </div>
                <div class="col-md-4">
                    <div>
                        <img src="./img/bg3.gif" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tuzi">
        <div class="container">
            
        </div>
    </div>
    <div class="had-xia">
            <div class="container">
                <h5>LATEST NEWS</h5>
            <p>......</p>
            <div class="neirongbufen">
                <div class="row">
                    <div class="col-md-4 clearfix">
                        <img src="images/had-zhong-yi_12.png" alt="" class="ii1">
                        <h5> In Demand:Collaboration Skill</h5>
                        <p>Proactively engage orthogonal growth strategies without
                            resource-leveling testing procedures.Seamlessly
                            predominate interoperable growth strategies.</p>
                        <p>23-02-2015</p>
                        <p class="ppp">65 Comments</p>
                    </div>
                    <div class="col-md-4 clearfix">
                        <div class="neirongyi clearfix">
                            <img src="images/had-zhong-er_15.png" alt="">
                            <div class="er clearfix">
                                <h6>Growth Strateqies We Maust K... </h6>
                                <p>Proactively engage orthogonal
                                    growth strategies without resource-
                                    leveling testing procedures.</p>
                            </div>
                        </div>
                        <div class="neironger clearfix">
                            <img src="images/had-zhong-san_18.png" alt="">
                            <div class="san clearfix">
                                <h6>Products Research Methodolo... </h6>
                                <p>Proactively engage orthogonal
                                    growth strategies without resource-
                                    leveling testing procedures.</p>
                            </div>
                        </div>
                        <div class="neirongsan clearfix">
                            <img src="images/had-zhong-si_21.png" alt="">
                            <div class="si clearfix">
                                <h6>Professional Leverage</h6>
                                <p>Proactively engage orthogonal
                                    growth strategies without resource-
                                    leveling testing procedures.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="neirongsi clearfix">
                            <img src="images/had-zhong-wu_18.png" alt="">
                            <div class="wu clearfix">
                                <h6>Professional Leverage</h6>
                                <p>Proactively engage orthogonal
                                    growth strategies without resource-
                                    leveling testing procedures.</p>
                            </div>
                        </div>
                        <div class="neirongwu clearfix">
                            <img src="images/had-zhong-si_21.png" alt="">
                            <div class="wu clearfix">
                                <h6>Professional Leverage</h6>
                                <p>Proactively engage orthogonal
                                    growth strategies without resource-
                                    leveling testing procedures.</p>
                            </div>
                        </div>
                        <div class="neirongliu">
                            <a href="">See all news→</a>
                        </div>
                    </div>
                </div>
            </div>
            </div>
        </div>
<div class="lan">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-6">
                <img src="images/had-xia-yi_30.png" alt="">
                <div class="lanyi">
                    <h4>5200</h4>
                    <p>SUBSCRIBERS</p>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <img src="images/had-xia-er_32.png" alt="">
                <div class="laner">
                    <h4>273 </h4>
                    <p>PROJECTS</p>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <img src="images/had-xia-san_35.png" alt="" class="ee">
                <div class="lansan">
                    <h4>640K</h4>
                    <p>APPRECIATIONS</p>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <img src="images/had-xia-si_38.png" alt="" class="oo">
                <div class="lansi">
                    <h4>132</h4>
                    <p>CLIENTS</p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="fen">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3>GET IN TOUCH</h3>
            </div>
            <div class="col-md-6 text-right">
                <span>Call us at(1800)765-4321 or</span>
                <button type="button" class="btn btn-primary">CONTACT US</button>
            </div>
        </div>
    </div>
</div>
<div class="footer-top">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <img src="images/footer-logo_03.png" alt="">
                <p class="yiduan">Proacticely aggregate B2B initiatives before extensive
                    channels. Monotonectally extend interactive methods of
                    empowerment through excellent applications. Rapidiously
                    synergize visionary  products with sticky technology.</p>
                <span>1234 North Main Street</span> <br>
                <span>New York, NY222222</span> <br>
                <span>Phone:(1800)765-4321</span> <br>
                <span>Email:email@yourdomain.come</span>
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-6">
                        <h6>USEFUL LINKS</h6>
                        <p class="shu">About Us</p>
                        <p>News</p>
                        <p>Community</p>
                        <p>Career </p>
                        <p>Blog</p>
                    </div>
                    <div class="col-md-6">
                        <p class="te">Press Kit</p>
                        <p>FAQ</p>
                        <p>Terms </p>
                        <p>Privacy Policy</p>
                        <p>Contact US</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <h6 class="hh">NEWSLETTER</h6>
                <p class="ll">Get the latest update from us by subscribing to our newsletter.</p>
                <input type="text" placeholder="youremail@domain.com" id="demo">
                <a  href="" class="btn">SUBSCRIBE</a>
                <h6 class="poo">GET CONNECTED</h6>
                <a href=""><img src="images/footer-biaozhi1_07.png" alt=""></a>
                <a href=""><img src="images/footer-biaozhi2_09.png" alt=""></a>
                <a href=""><img src="images/footer-biaozhi3_11.png" alt=""></a>
                <a href=""><img src="images/footer-biaozhi4_13.png" alt=""></a>
            </div>
        </div>
    </div>
</div>
<div class="footer-bottom">
    <div class="container">
        <div class="zui text-center">
            <p>More Templates - Collect from</p>
        </div>
    </div>
</div>




<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>